{% extends "helpdesk/base.html" %}{% load i18n %}
{% load static %}

{% block helpdesk_title %}{% trans "Reports &amp; Statistics" %}{% endblock %}

{% block helpdesk_head %}

{% endblock %}

{% block helpdesk_breadcrumb %}
<li class="breadcrumb-item">
    <a href="{% url 'helpdesk:report_index' %}">{% trans "Reports &amp; Statistics" %}</a>
</li>
<li class="breadcrumb-item active">{{ title }}</li>
{% endblock %}

{% block helpdesk_body %}
<h2>{% trans "Reports &amp; Statistics" %}</h2>

<div class="card mb-3">
    <div class="card-header">
        <i class="fas fa-filter"></i>
        {% trans 'Saved Queries' %}
    </div>
    <div class="card-body">
        {% if user_saved_queries_ %}
            <p>{% trans "You can run this query on filtered data by using one of your saved queries." %}</p>
            <form method='GET' action='./'>
                <label for='saved_query'>{% trans "Select Query:" %}</label>
                <select name='saved_query'>
                    <option value="">--------</option>{% for q in user_saved_queries_ %}
                    <option value="{{ q.id }}"{% if saved_query == q %} selected{% endif %}>{{ q.title }}</option>{% endfor %}
                </select>
                <input class="btn btn-primary" type='submit' value='{% trans "Filter Report" %}'>
            </form>
        {% else %}
            <p>{% trans "Want to filter this report to just show a subset of data? Go to the Ticket List, filter your query, and save your query." %}</p>
        {% endif %}
    </div>
    <!-- /.card-body -->
</div>
<!-- /.card -->

<div class="card mb-3">
    <div class="card-header">
        <i class="fas fa-chart-line"></i>
        {{ title }}
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>{% for h in headings %}
                        <th>{% if forloop.first %}{{ h|title }}{% else %}{{ h }}{% endif %}</th>{% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for d in data %}
                    <tr class='row_{% cycle 'odd' 'even' %}'>
                        {% for f in d %}<td class='report'>{{ f }}</td>{% endfor %}
                    </tr>
                    {% endfor %}
                    <tr>
                        {% for f in total_data %}<td class='report'>{{ f }}</td>{% endfor %}
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- /.table-responsive -->
        <div class="flot-chart">
            <div class="flot-chart-content" id="chart-content"></div>
        </div>
    </div>
    <!-- /.card-body -->
</div>
<!-- /.card -->
{% endblock %}


{% block helpdesk_js %}

    <!-- Flot Charts JavaScript -->
    <script src="/static/helpdesk/vendor/flot/excanvas.min.js"></script>
    <script src="/static/helpdesk/vendor/flot/jquery.flot.js"></script>
    <script src="/static/helpdesk/vendor/flot/jquery.flot.categories.js"></script>
    <script src="/static/helpdesk/vendor/flot/jquery.flot.pie.js"></script>
    <script src="/static/helpdesk/vendor/flot/jquery.flot.resize.js"></script>
    <script src="/static/helpdesk/vendor/flot/jquery.flot.time.js"></script>
    <script src="/static/helpdesk/vendor/flot-tooltip/jquery.flot.tooltip.min.js"></script>

    <!-- Morris Charts JavaScript -->
    {% if helpdesk_settings.HELPDESK_USE_CDN %}
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
    {% else %}
    <script src="{% static 'helpdesk/vendor/raphael/raphael.min.js' %}"></script>
    <script src="{% static 'helpdesk/vendor/morrisjs/morris.min.js' %}"></script>
    {% endif %}

{% if charttype == "date" %}
<script type='text/javascript'>

Morris.Line({
  element: 'chart-content',
  data: {% autoescape on %}{{ morrisjs_data|safe }}{% endautoescape %},
  xkey: 'x',
  ykeys: [{% for d in data %}{{ forloop.counter0 }}{% if not forloop.last %}, {% endif %}{% endfor %}],
  labels: [{% for n in series_names %}"{{ n }}"{% if not forloop.last %}, {% endif %}{% endfor %}],
  xLabels: "month"
});

</script>
{% endif %}
{% if charttype == "bar" %}
<script type='text/javascript'>

Morris.Bar({
  element: 'chart-content',
  data: {% autoescape on %}{{ morrisjs_data|safe }}{% endautoescape %},
  xkey: 'x',
  ykeys: [{% for d in data %}{{ forloop.counter0 }}{% if not forloop.last %}, {% endif %}{% endfor %}],
  labels: [{% for n in series_names %}"{{ n }}"{% if not forloop.last %}, {% endif %}{% endfor %}]
});

</script>
{% endif %}



{% endblock %}
